<template>
	<view class="page">
		<!-- 头部 start -->
		<view class="head">
			<view class="head-text">
				{{address}}
			</view>
			<view class="head-icon">
				<button class="create" @tap="toCircle">
					<view class="iconfont icon-ic_add" style="color: #5080FE;font-size: 18px;"></view>
					<view class="create-text">建圈</view>
				</button>
			</view>
		</view>
		<!-- 头部 end -->
		
		<!-- 圈子 start -->
		<view class="circles">
			<circleCompo ref="comp" class="circleCompo" v-for="(cir, ind) in circles" :key="ind" :circleId="cir.id" :iconUrl="cir.pic" 
			:slogan="cir.slogan" :title="cir.title" :status="cir.joinFlag" :address="cir.address" @closeExit="closeExit"
			 @toJoin="toJoin" @toExit="toExit" @toInvite="toInvite" @toCircleInfo="toCircleInfo"></circleCompo>
		</view>
		<!-- 圈子 end -->
	</view>
</template>

<script>
	
	import circleCompo from '../../../components/circle-compo/circle-compo.vue'
	import amap from '../../../apis/amap-wx.js'
	
	export default {
		data() {
			return {
				circles: [],
				address: '',
				amapPlugin: null,
				key: 'dbc9c5bdc6c906f78292d58fe854783a',
				userInfo: {}
			}
		},
		onLoad() {
			var that = this;
			this.userInfo = this.getGlobalUser("globalUser");
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			uni.setTabBarBadge({
				index: 0,
				text: '9'
			});
			uni.setTabBarBadge({
				index: 1,
				text: '新'
			});
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: (res) => {
					uni.showLoading({
						title: '获取信息中'
					});
					this.amapPlugin.getRegeo({
						success: (data) => {
							console.log(data);
							var address = data[0].regeocodeData.formatted_address;
							if(address.indexOf("区") >= 0){
								address = address.substring(address.indexOf("省"),address.indexOf("区") + 1);
							}else{
								address = address.substring(address.indexOf("省"),address.indexOf("县") + 1);
							}
							this.address = address
							this.userInfo.locateAddress = address;
							uni.setStorageSync("globalUser", this.userInfo);
							uni.hideLoading();
						},
						fail() {
							that.address = "位置定位失败";
						}
					});
			    },
				fail() {
					that.address = "位置定位失败";
				}
			});
		},
		onShow() {
			this.getCircles();
		},
		methods: {
			closeExit(){
				this.$refs.comp.forEach(function(ele,ind){
					ele.closeExit();
				})
			},
			getCircles(){
				this.$apis.getMemCircle({memId: this.userInfo.id}).then((res) => {
					this.circles = res;
				});
			},
			toCircle(){
				uni.navigateTo({
					url: '../../member/honor/honor?from=circle'
				})
			},
			toJoin(e){
				this.$apis.joinCircle({memId: this.userInfo.id, circleId: e}).then((res) => {
					for (var i = 0; i < this.circles.length; i++) {
						if(this.circles[i].id == e){
							this.circles[i].joinFlag = 1;
						}
					}
				});
			},
			toExit(e){
				this.$apis.exitCircle({memId: this.userInfo.id, circleId: e}).then((res) => {
					for (var i = 0; i < this.circles.length; i++) {
						if(this.circles[i].id == e){
							this.circles[i].joinFlag = 0;
						}
					}
				});
			},
			toInvite(e){
				console.log(e);
			},
			toCircleInfo(e){
				var joinFlag = 0;
				for (var i = 0; i < this.circles.length; i++) {
					if(this.circles[i].id == e){
						joinFlag = this.circles[i].joinFlag;
					}
				}
				if(joinFlag == 0){
					uni.showModal({
					    title: '加圈提示',
					    content: '加入圈子才能查看更多，是否加入？',
					    success:(res) => {
					        if (res.confirm) {
					            this.toJoin(e);
								uni.navigateTo({
									url: '../circleInfo/circleInfo?circleId=' + e
								})
					        }
					    }
					});
				}else{
					uni.navigateTo({
						url: '../circleInfo/circleInfo?circleId=' + e
					})
				}
			}
		},
		components: {
			circleCompo
		}
	}
</script>

<style>
	@import url("main.css");
	@import url("../../../static/iconfont/iconfont.css");
</style>
